<template>
  <div>
    <Row>
      <Row class="search-info-style">
        <Col span="6">
          <span>申请时间：</span>
          <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" placement="bottom-end"
                      style="width: 70%" v-model="searchInfo.applytime"></DatePicker>
        </Col>
        <Button class="new-btn-sty" @click="searchData()" style="float:right">
          <Icon type="ios-clock-outline" /> 刷新
        </Button>
        <Button class="new-btn-sty" @click="exportData" style="float:right">导出居住证明数据</Button>
        <Button class="new-btn-sty" @click="searchData()" style="float:right">
          <Icon type="ios-search" /> 搜索
        </Button>
      </Row>
      <Table border :columns="columns1" :data="data" ref="table"></Table>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
      <div style="float: right;margin-top: 10px">
        <Page :total="pageData.totalRecord" show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
      </div>
    </Row>
  </div>
</template>

<script>
import { date2str, getResidentialList } from '@/api/eventlist'

export default {
  name: 'index.vue',
  data () {
    return {
      loadData: true,
      data: [],
      data2: [],
      columns1: [
        { title: '序号', type: 'index', key: 'index', width: 100, align: 'center' },
        { title: '姓名', key: 'name', width: 100 },
        { title: '订单编号', key: 'code', width: 160 },
        { title: '身份证', key: 'cardno', width: 200 },
        { title: '性别', key: 'sex', width: 80 },
        { title: '区(县)', key: 'city', width: 150 },
        { title: '街道', key: 'street', width: 150 },
        { title: '社区', key: 'community', width: 180 },
        { title: '主送机关', key: 'sxzm', width: 200 },
        { title: '现住址', key: 'xzz', width: 200 },
        { title: '其他情况', key: 'qtqk', width: 300 }
      ],
      pageData: {
        totalRecord: 0,
        pageSize: 10,
        pageNo: 1
      },
      searchInfo: {}
    }
  },
  methods: {
    pageChange (ret) {
      console.log(ret)
      this.pageData.pageNo = ret
      this.getApiData()
    },
    pageSizeChange (ret) {
      this.pageData.pageSize = ret
      this.getApiData()
    },
    init (param) {
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      getResidentialList(param).then(res => {
        if (res.data.data) {
          this.data = res.data.data
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取事项办理列表失败', desc: res.data.errmsg })
        }
      })
    },
    // 切换tab页和搜索，刷新按钮
    searchData () {
      let params = {
        name: this.searchInfo.applyname,
        cardno: this.searchInfo.cardno
      }
      if (this.searchInfo.applytime[0]) params.start_time = date2str(this.searchInfo.applytime[0])
      if (this.searchInfo.applytime[1]) params.end_time = date2str(this.searchInfo.applytime[1])
      this.searchInfo.currentPageNo = 1
      this.init(params)
    },
    exportData () {
      let param = {
        pageSize: 200000,
        pageNo: 1
      }
      if (this.searchInfo.applytime[0]) param.start_time = date2str(this.searchInfo.applytime[0])
      if (this.searchInfo.applytime[1]) param.end_time = date2str(this.searchInfo.applytime[1])
      getResidentialList(param).then(res => {
        if (res.data.data) {
          this.data2 = res.data.data
          let today = new Date()
          this.$refs.table.exportCsv({
            filename: '居住证明数据' + date2str(today),
            columns: this.columns1,
            data: this.data2.map(item => {
              return item
            }),
            original: false
          })
        } else {
          this.loadData = true
          this.$Notice.error({ title: '错误', desc: res.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.searchInfo.currentPageNo = this.$route.params.pageNo || 1
    this.init({})
  }
}
</script>

<style scoped>
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
</style>
